<template>
  <view class="container">
    <view class="search-bar">
      <uni-search-bar
        @confirm="search"
        :focus="true"
        v-model="searchValue"
        @blur="blur"
        @focus="focus"
        @input="input"
        @cancel="cancel"
        @change="change"
        @clear="clear"
      ></uni-search-bar>
    </view>
    <view>
      <view class="uni-margin-wrap">
        <swiper
          class="swiper"
          circular
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item v-for="item in bannerList" :key="item.bannerid">
            <image class="banner-img" :src="item.img" mode="scaleToFill" />
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="goods-list">
      <view
        class="goods-item"
        v-for="item in goodsList"
        :key="item.proid"
        @click="toDetail(item.proid)"
        :data-brand="item.brand || '品牌'"
      >
        <image :src="item.imgs[0]" mode="scaleToFill" />
        <view class="proname">{{ item.proname }}</view>
        <view class="price">{{ item.originprice }}￥</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="js">
 import {ref} from 'vue';
 import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app';
import  request  from '../../utils/intance';

 // 轮播图配置
 const indicatorDots = ref(true);
 const autoplay = ref(true);
 const interval = ref(2000);
 const duration = ref(500);
//获取商品列表
 const goodsList = ref([]);
 const count= ref(1);
 const limitNum= ref(10);
const getGoods=()=>{
	uni.request({
		url:"http://47.94.6.186:3001/api/pro/list",
		method:'GET',
		data:{
			count: count.value,
			limitNum: limitNum.value
		},
		success:(res)=>{
			console.log(res.data);
			if(res.data.code==="200"){
				goodsList.value=[...goodsList.value,...res.data.data];
			}else{
				uni.showToast({
					title:res.data.message,
					icon:"none"
				})
			}
		}
	})
}
//获取轮播图
const bannerList = ref([]);
const getBanner = async() => {
	// uni.request({
	// 	url: "http://47.94.6.186:3001/api/banner/list",
	// 	method:'GET',
	// 	success:(res)=>{
	// 		console.log(res.data);
	// 		if(res.data.code === "200"){
	// 			bannerList.value = res.data.data;
	// 		}else{
	// 			uni.showToast({
	// 				title: res.data.message,
	// 				icon: "none"
	// 			})
	// 		}
	// 	},
	// 	fail: (err) => {
	// 		console.error("获取轮播图数据失败", err);
	// 		uni.showToast({
	// 			title: "网络异常，请稍后重试",
	// 			icon: "none"
	// 		})
	// 	}
	// })
 const res=await request({
		url:'/api/banner/list',
		method:'GET',
	})
	console.log(res.data);
	if(res.code=="200"){
		bannerList.value=res.data;
	}else{
		uni.showToast({
			title:res.data.message,
			icon:"none"
		})
	}

}
const toDetail = (proid) => {
	uni.navigateTo({
		url: `/pages/detail?id=${proid}`
	})
}
getGoods();
getBanner();
onReachBottom(() => {
  count.value+=1;
  getGoods();
//   console.log(goodsList.value);

});
onPullDownRefresh(()=>{
	count.value=1;
	goodsList.value=[];
	getGoods();
	uni.stopPullDownRefresh();
})
</script>

<style scoped>
.search-bar {
  background-color: #7aea46;
}
.search-result {
  padding-top: 10px;
  padding-bottom: 20px;
  text-align: center;
}

.search-result-text {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 0px;
}

.uni-mt-10 {
  margin-top: 10px;
}
.container {
  height: 100vh;
  padding-bottom: 20px;
}

.uni-margin-wrap {
  width: 100%;
  position: relative;
}

.swiper {
  height: 450rpx;
  width: 90%;
  margin: auto;
}
.swiper image {
  border-radius: 5%;
}
.uni-margin-wrap::before {
  content: "";
  width: 150%;
  height: 50%;
  background-color: #7aea46;
  display: block;
  clear: both;
  position: absolute;
  top: 0;
  left: 0;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

.goods-item {
  position: relative;
  width: 48%;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.goods-item::after {
  content: attr(data-brand);
  display: block;
  font-size: 24rpx;
  color: #666;
  padding: 10rpx;
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border-bottom-left-radius: 10rpx;
}
.goods-item image {
  width: 100%;
  height: 300rpx;
}

.proname {
  padding: 10rpx;
  font-size: 28rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price {
  padding: 0 10rpx 10rpx;
  color: #ff0000;
  font-size: 32rpx;
  font-weight: bold;
}
.banner-img {
  width: 100%;
  height: 100%;
}
</style>
